<template>
  <div>
    <!-- {{ multipleSelection }} -->
    <el-button type="primary" @click="editor(0)">解除禁用</el-button>
    <el-button type="danger" @click="editor(1)">禁用账户</el-button>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      
      <el-table-column label="昵称" prop="nickName">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="loginName" label="登录名"> 

        
      </el-table-column>
      <el-table-column  label="身份状态">
        <template slot-scope="scope">
              <span class="blue" v-if=" scope.row.lockedFlag==0">
                   正常
              </span>
              <span v-else class="red">
                   禁用
              </span>
        </template> 
    
    </el-table-column>
      <el-table-column label="是否注销">
        <template slot-scope="scope">
              <span class="blue" v-if=" scope.row.isDeleted==0">
                   正常
              </span>
              <span v-else class="red">
                   禁用
              </span>
        </template> 
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间" show-overflow-tooltip>
      </el-table-column>
    </el-table>

    <el-pagination
  background
  layout="prev, pager, next"
  @current-change="currentChange"
  :total="total">
</el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      total:0
    };
  },
  mounted() {
    this.getPage(1);
  },
  methods: {
    async getPage(page) {
      //ajax
      let result = await this.$http.get("/users", {
        params: {
          pageNumber: page,
          pageSize: 10,
        },
      });
      console.log(result);

      this.tableData=result.data.list;
      this.total=result.data.totalCount;
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    currentChange(arg){
        // console.log(arg);
        this.getPage(arg);
    },
   async editor(arg){
         if(this.multipleSelection.length==0){
             this.$message("请选择用户");
             return false;
         }
     let arry=[];
        this.multipleSelection.map(item=>{
              arry.push(item.userId)
        })
      let result=await this.$http.put(`/users/${arg}`,{
          ids:arry
      })
      this.getPage(1)
    }
  },
};
</script>

<style lang="less" scoped>
.red{
    color: red;
}
.blue{
    color: green;
}
</style>